<template>
  <span class="vue-contextmenu-listWrapper" :class="'vue-contextmenuName-' + contextMenuData.menuName">
    <li v-for="item in contextMenuData.menulists" class="context-menu-list menu-item-disabled">
      <div class="button par" @click.stop="fnHandler(item)">
        <i :class="item.icoName"></i>
        <span>{{item.btnName}}</span>
        <div v-if="item.child" class="sec_li">
          <li @click.stop="fnHandler(list)" v-for="list in item.child">{{list.desc}}</li>
        </div>
      </div>
    </li>
  </span>
</template>

<script>
  export default {
    name: "vmenu",
    props: {
      contextMenuData: {
        type: Object,
        requred: false,
        default () {
          return {
            menuName: null,
            axios: {
              x: null,
              y: null
            },
            menulists: [
              {
                fnHandler: 'adddata',
                icoName: 'fa fa-home fa-fw',
                btnName: '开房'
              },
              {
                fnHandler: 'savedata',
                icoName: 'fa fa-home fa-fw',
                btnName: 'Save',
                child:[
                  {fnHandler:'',name:change,desc:"换房"},
                  {fnHandler:'',name:change,desc:"预定"},
                  {fnHandler:'',name:change,desc:"退押金"},
                  {fnHandler:'',name:change,desc:"转押金"},
                  {fnHandler:'',name:change,desc:"转账"},
                  {fnHandler:'',name:change,desc:"冲账"},
                  {fnHandler:'',name:change,desc:"部分结账"},
                  {fnHandler:'',name:change,desc:"修改住户信息"},
                  {fnHandler:'',name:change,desc:"连房"},
                  {fnHandler:'',name:change,desc:"分房"},
                  {fnHandler:'',name:change,desc:"转账结账"},
                  {fnHandler:'',name:change,desc:"拆账"}
                ]
              }
            ]
          }
        }
      },
      transferIndex: {
        type: Number,
        default: 0
      },
    },
    watch: {
      'contextMenuData.axios' (val) {
        var x = val.x
        var y = val.y
        var _this = this
        var index = _this.transferIndex
        var menuName = 'vue-contextmenuName-' + _this.contextMenuData.menuName
        var menu = document.getElementsByClassName(menuName)[index]
        menu.style.display = 'block'
        document.addEventListener('mouseup', function () {
          menu.style.display = 'none'
        }, false)
      }
    },
    methods: {
      fnHandler (item) {
        this.$emit("getMenuList",item);
      }
    }
  }
</script>
<style>
  .vue-contextmenu-listWrapper {
    box-shadow: 2px 2px 2px #cccccc;
    display: none;
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
  }
  .vue-contextmenu-listWrapper .context-menu-list {
    width: 150px;
    height: 32px;
    border-radius: 4px;
    background: #FFF;
    text-decoration: none;
    list-style: none;
  }
  
  .vue-contextmenu-listWrapper .context-menu-list .button {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    outline: 0;
    border: 0;
    text-align:center;
    color: #333;
    line-height: 32px;
  }
  .vue-contextmenu-listWrapper .context-menu-list .button i,  .vue-contextmenu-listWrapper .context-menu-list .button span {
    /*float: left;*/
  }
  .vue-contextmenu-listWrapper .context-menu-list .button i{
    /*padding: 0 10px 0 10px;*/
    float: right;
  }
  .vue-contextmenu-listWrapper .context-menu-list .button:hover {
    box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
    color: #ffffff;
    border-radius: 4px;
    background: -webkit-linear-gradient(bottom, #5a6a76 , #2e3940); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, #5a6a76, #2e3940); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, #5a6a76, #2e3940); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #5a6a76 , #2e3940);
  }
 	.vue-contextmenu-listWrapper .context-menu-list.menu-item-disabled .button:hover{cursor: default;background-color: #efefef;}
  .vue-contextmenu-listWrapper .context-menu-list .button .sec_li{
    width: 100px;
    position: absolute;
    /*position:relative;*/
    /*margin-bottom:-100%;*/
    /*margin-left: 100%;*/
    left:100%;
    top:100%;
    background-color: #ddd;
    border-left: 1px solid #ccc;
    text-decoration: none;
    list-style: none;
    box-shadow: 1px 1px 1px #cccccc;
    /*z-index: 999;*/
    /*background: -webkit-gradient(linear, left top, left bottom, from(#5a6a76) , to(#2e3940));*/
  }
  .sec_li{
  	display: none;
  	/*transform:translateY(-100%);*/
  	transform: translateY(-100%) translateZ(200px);
  	/*margin-bottom: -100%;*/
  }
  .vue-contextmenu-listWrapper .context-menu-list .button:hover .sec_li{
  	display: inline-block;
  	color: #000;
  }
  .vue-contextmenu-listWrapper .context-menu-list .button:hover .sec_li li:hover{
  	 box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
    color: #ffffff;
    border-radius: 4px;
    background: -webkit-linear-gradient(bottom, #5a6a76 , #2e3940); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, #5a6a76, #2e3940); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, #5a6a76, #2e3940); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #5a6a76 , #2e3940);
  }
  .vue-contextmenu-listWrapper .context-menu-list .button:hover .sec_li li {
  	width: 100%;
  	cursor: pointer;
  	height: 32px;
  	line-height: 32px;
  	text-align: center;
  	position: relative;
  	z-index: 999;
  }
  .vue-contextmenu-listWrapper .context-menu-list .button:hover .sec_li li:last-child .sec_li{
  	background-color: #fafafa;
  }
	.sec_li li{
    background-color: #fafafa;
  }
  .par{
  	background-color: #fafafa;
  	
  }

</style>
